<template>
  <Back></Back>
  <div style="margin-top: 60px">
    <el-row style="overflow: hidden">
      <el-col :span="8" style="height: 500px; overflow-y: auto">
        <el-affix :offset="60">
          <div v-if="showUser" class="left-user">
            <div style="display: flex" @click="toUser(userinfo.userInfo?.id)">
              <el-avatar :size="40" :src="userinfo.userInfo?.avatar" @error="true">
                {{ userinfo.userInfo?.nickname }}
              </el-avatar>
              <div style="margin-left: 15px; font-size: 12px; height: 40px; margin-top: 4px">
                <div>{{ userinfo.userInfo?.nickname }}</div>
                <div style="color: #a7a7a7">
                  学龄{{ titleUtil.diftTime(userinfo.userInfo?.createTime) }}
                </div>
              </div>
            </div>
            <div>
              <div style="display: flex; margin-top: 20px">
                <div class="userTag rank">
                  <div>{{ titleUtil.numberTo(rank.weekRank) }}</div>
                  <div class="ctag">周排名</div>
                </div>
                <div class="userTag rank">
                  <div>{{ titleUtil.numberTo(rank.rank) }}</div>
                  <div class="ctag">总排名</div>
                </div>
                <div class="userTag">
                  <div>{{ titleUtil.numberTo(userinfo.historyCount) }}</div>
                  <div class="ctag">访问</div>
                </div>
              </div>
            </div>
            <el-divider />
            <div style="display: flex">
              <div class="userTag">
                <div>{{ titleUtil.numberTo(userinfo.contentCount) }}</div>
                <div class="ctag">文章</div>
              </div>
              <div class="userTag">
                <div>{{ titleUtil.numberTo(userinfo.followCount) }}</div>
                <div class="ctag">粉丝</div>
              </div>
              <div class="userTag">
                <div>{{ titleUtil.numberTo(userinfo.likeCount) }}</div>
                <div class="ctag">获赞</div>
              </div>
              <div class="userTag">
                <div>{{ titleUtil.numberTo(userinfo.reviewCount) }}</div>
                <div class="ctag">评论</div>
              </div>
              <div class="userTag">
                <div>{{ titleUtil.numberTo(userinfo.collectCount) }}</div>
                <div class="ctag">收藏</div>
              </div>
            </div>
            <el-divider />
            <div
              style="
                text-align: center;
                justify-content: space-between;
                display: flex;
                margin-top: 20px;
              "
              v-if="titleUtil.getCurrentUserId() === blogItem.userId ? false : true"
            >
              <el-button
                round
                size="default"
                style="width: 100%; background: rgb(255, 136, 0)"
                v-if="isFollow"
                >私信</el-button
              >
              <el-button
                round
                size="default"
                style="width: 100%"
                v-else
                @click="followUser(userinfo.id)"
                >关注</el-button
              >
            </div>
          </div>
        </el-affix>
      </el-col>
      <el-col :span="16" style="overflow-y: auto">
        <div class="main">
          <div style="margin-bottom: 20px">
            <h1>{{ titleUtil.title(blogItem.title) }}</h1>
            <div class="item">
              <div
                :class="[
                  { model: blogItem.model === 0 ? true : false },
                  { model1: blogItem.model === 1 ? true : false },
                  { model2: blogItem.model === 2 ? true : false }
                ]"
              >
                {{ titleUtil.model(blogItem.model) }}
              </div>

              <div class="citem">
                {{ blogItem.author }}
              </div>
              <div class="citem">
                <i class="iconfont icon-icon-test5"></i>于{{
                  titleUtil.formatDate(blogItem.createTime)
                }}发布
              </div>
              <div class="citem">
                <i class="iconfont icon-icon-test"></i>阅读量{{
                  titleUtil.numberTo(blogItem.historyPeopleCount)
                }}
              </div>
              <div
                class="citem"
                @click="collectContent"
                :class="{ avtiveCollect: userinfo.isCollect }"
              >
                <i class="iconfont icon-icon-test37"></i>收藏{{
                  titleUtil.numberTo(blogItem.collect)
                }}
              </div>
              <div class="citem" @click="likeContent" :class="{ activeLike: userinfo.isLike }">
                <i class="iconfont icon-icon-test35"></i>点赞{{ titleUtil.numberTo(blogItem.like) }}
              </div>
            </div>
          </div>
          <div style="font-weight: 400" v-html="contentType"></div>
        </div>
        <div class="main" style="margin-top: 20px" v-if="blogItem.isReview">
          <Review
            :dataList="reviewList"
            :contentId="blogItem.id"
            @refresh="handlerRefresh"
          ></Review>
        </div>
      </el-col>
    </el-row>
  </div>
  <ContentLoading v-if="loading"></ContentLoading>
</template>

<script setup>
import Back from '../../components/client/Back.vue'
import { computed, nextTick, onMounted, reactive, ref } from 'vue'
import { useStore } from 'vuex'
import { Marked } from 'marked'
import { markedHighlight } from 'marked-highlight'
import hljs from 'highlight.js'
//引入markdown样式
import 'highlight.js/styles/atom-one-dark.css'
import titleUtil from '@/util/titleUtil'
import request from '@/util/request'
import { ElNotification } from 'element-plus'
import Review from '@/components/client/Review.vue'
import ContentLoading from '@/components/load/ContentLoading.vue'

import { useRouter } from 'vue-router'

const store = useStore()
const router = useRouter()

const blogItem = computed(() => store.getters.blogItem)
const userinfo = ref({})
const showUser = ref(false)
const rank = ref({})
const loading = ref(false)
const isFollow = ref(false)
const reviewList = ref([])

const marked = new Marked(
  markedHighlight({
    langPrefix: 'hljs language-',
    highlight(code, lang) {
      const language = hljs.getLanguage(lang) ? lang : 'shell'
      return hljs.highlight(code, { language }).value
    }
  })
)

const followUser = () => {
  const userId = blogItem.value.id
  if (userId == null) {
    ElNotification.error('出错了，稍后再试')
    return
  }
  request
    .get(`/user/follow?userId=${userId}`)
    .then((res) => {
      setTimeout(() => {
        isFollow.value = res.data
        if (res.data) {
          ElNotification.success('关注成功')
        } else {
          ElNotification.success('成功取关')
        }
      })
    })
    .catch((err) => {
      if (err.response) {
        console.error(err.message)
        ElNotification({
          title: 'Error',
          message: err.message,
          type: 'error'
        })
      } else {
        ElNotification({
          title: 'Error',
          message: '网络错误',
          type: 'error'
        })
      }
    })
}

const collectContent = () => {
  request
    .get(`/user/collect?contentId=${blogItem.value.id}`)
    .then((res) => {
      console.log('获取成功：', res)
      if (res.data === 0) {
        // 取消收藏
        ElNotification.warning('取消收藏')
      } else {
        ElNotification.success('收藏成功')
      }
      getUser(blogItem.value.id, blogItem.value.userId)
    })
    .catch((err) => {
      if (err.response) {
        console.error(err.message)
        ElNotification({
          title: 'Error',
          message: err.message,
          type: 'error'
        })
      } else {
        ElNotification({
          title: 'Error',
          message: '网络错误',
          type: 'error'
        })
      }
    })
}

const likeContent = () => {
  request
    .get(`/user/like?contentId=${blogItem.value.id}`)
    .then((res) => {
      if (res.data === 0) {
        // 取消收藏
        ElNotification.warning('取消点赞')
      } else {
        ElNotification.success('点赞成功')
      }
      getUser(blogItem.value.id, blogItem.value.userId)
    })
    .catch((err) => {
      if (err.response) {
        console.error(err.message)
        ElNotification({
          title: 'Error',
          message: err.message,
          type: 'error'
        })
      } else {
        ElNotification({
          title: 'Error',
          message: '网络错误',
          type: 'error'
        })
      }
    })
}

const contentType = computed(() => marked.parse(blogItem.value.content))

console.log('路由接收参数', blogItem.value)
const getUser = (contentId, userId) => {
  userinfo.value = {}
  request
    .get(`/user/one?contentId=${contentId}&id=${userId}`)
    .then((res) => {
      console.log('userinfo--->', res.data)
      userinfo.value = res.data
      isFollow.value = res.data.isFollow
    })
    .catch((err) => {
      if (err.response) {
        console.error(err.message)
        ElNotification({
          title: 'Error',
          message: err.message,
          type: 'error'
        })
      } else {
        ElNotification({
          title: 'Error',
          message: '网络错误',
          type: 'error'
        })
      }
    })
}
// 获取排行榜
const getRank = (userId) => {
  request
    .get(`/rank/one?userId=${userId}`)
    .then((res) => {
      console.log('获取成功：', res.data)
      rank.value = res.data
    })
    .catch((err) => {
      if (err.response) {
        console.error(err.message)
        ElNotification({
          title: 'Error',
          message: err.message,
          type: 'error'
        })
      } else {
        ElNotification({
          title: 'Error',
          message: '网络错误',
          type: 'error'
        })
      }
    })
}

const getReview = () => {
  request
    .get(`/user/review/content?contentId=${blogItem.value.id}`)
    .then((res) => {
      console.log('获取成功：', res)
      reviewList.value = res.data
    })
    .catch((err) => {
      if (err.response) {
        console.error(err.message)
        ElNotification({
          title: 'Error',
          message: err.message,
          type: 'error'
        })
      } else {
        ElNotification({
          title: 'Error',
          message: '网络错误',
          type: 'error'
        })
      }
    })
}

const toUser = (id) => {
  router.push({ name: 'UserPage', params: { userId: id } })
}

const handlerRefresh = () => {
  getReview()
}

onMounted(() => {
  loading.value = true
  getUser(blogItem.value.id, blogItem.value.userId)
  getRank(blogItem.value.userId)
  getReview()
  nextTick(() => {
    showUser.value = true
  }, 200)
  setTimeout(() => {
    loading.value = false
  }, 1000)
})
</script>

<style scoped>
.rank:hover {
  cursor: pointer;
  color: #12d0ff;
  background: #eee;
}
.main {
  background: #fff;
  padding: 20px;
  margin: 0 20px;
}

.item {
  background: #eee;
  height: 40px;
  line-height: 30px;
  border-radius: 5px;
  display: flex;
  font-weight: 100;
  font-size: 12px;
}

.model {
  color: #fff;
  background: #4e54c8; /* fallback for old browsers */
  background: -webkit-linear-gradient(to right, #8f94fb, #4e54c8); /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(
    to right,
    #8f94fb,
    #4e54c8
  ); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

  height: 25px;
  border-radius: 5px;
  font-weight: 600;
  line-height: 25px;
  padding: 0 10px;
  border: 1px #000000 solid;
  margin-top: 7.5px;
}

.model1 {
  color: #fff;
  background: #ee9ca7; /* fallback for old browsers */
  background: -webkit-linear-gradient(to right, #ffdde1, #ee9ca7); /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(
    to right,
    #ffdde1,
    #ee9ca7
  ); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
  height: 25px;
  border-radius: 5px;
  font-weight: 600;
  line-height: 25px;
  padding: 0 10px;
  border: 1px #ff0022 solid;
  margin-top: 7.5px;
}

.model2 {
  color: #fff;
  background: #2193b0; /* fallback for old browsers */
  background: -webkit-linear-gradient(to right, #6dd5ed, #2193b0); /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(
    to right,
    #6dd5ed,
    #2193b0
  ); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

  height: 25px;
  border-radius: 5px;
  font-weight: 600;
  line-height: 25px;
  padding: 0 10px;
  border: 1px #00aeff solid;
  margin-top: 7.5px;
}

.citem {
  padding: 5px 10px;
}

i {
  margin-right: 3px;
}

.left-user {
  max-height: 500px;
  background: #fff;
  padding: 20px;
  width: 80%;
  margin-left: 5%;
}

.userTag {
  width: 20%;
  text-align: center;
  font-size: 14px;
}

.ctag {
  color: #a7a7a7;
  margin-top: 5px;
}
.avtiveCollect {
  color: #ff9100;
}
.activeLike {
  color: #ff0022;
}

.citem:hover {
  cursor: pointer;
}
</style>
